import {useEffect, useState} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import {Outlet, Route, Routes, useNavigate} from "react-router-dom";
import LoginPage from "./pages/LoginPage.jsx";
import {AboutPage} from "./pages/AboutPage.jsx";
import Footer from "./components/Footer.jsx";
import Navbar from "./components/Navbar.jsx";
import {NotFoundPage} from "./pages/NotFoundPage.jsx";
import {Box, Center, Container, useColorModeValue} from "@chakra-ui/react";
import HomePage from "./pages/HomePage.jsx";
import MedicineManagePage from "./pages/manage/medicine/MedicineManagePage.jsx";
import MedicineEditPage from "./pages/manage/medicine/MedicineEditPage.jsx";
import DoctorManagePage from "./pages/manage/doctor/DoctorManagePage.jsx";
import {OrderManagePage} from "./pages/manage/order/OrderManagePage.jsx";
import StudentManagePage from "./pages/manage/student/StudentManagePage.jsx";
import DoctorEditPage from "./pages/manage/doctor/DoctorEditPage.jsx";
import {StudentEditPage} from "./pages/manage/student/StudentEditPage.jsx";
import {OrderEditPage} from "./pages/manage/order/OrderEditPage.jsx";
import {DoctorShowPage} from "./pages/student/DoctorShowPage.jsx";
import {DoctorOrderManagePage} from "./pages/doctor/DoctorOrderManagePage.jsx";
import {DoctorMedicineManagePage} from "./pages/doctor/DoctorMedicineManagePage.jsx";
import {DoctorMedicineAddPage} from "./pages/doctor/DoctorMedicineAddPage.jsx";
import {TakeMedicinePage} from "./pages/student/TakeMedicinePage.jsx";
import {MedicineHistoryDetailPage} from "./pages/student/MedicineHistoryDetailPage.jsx";
import {MedicineHistoryPayPage} from "./pages/student/MedicineHistoryPayPage.jsx";
import {useAuth} from "./hooks/index.js";

function App() {
    const {authInfo: info} = useAuth()
    const [authInfo, setAuthInfo] = useState({})
    useEffect(() => {
        if (!localStorage.getItem('auth-info') ||
            localStorage.getItem('auth-info') === undefined) {
            localStorage.setItem('auth-info', JSON.stringify({
                profile: null,
                isLoggedIn: false,
                isPending: false, // 登录中
                error: ''
            }))
        }
        setAuthInfo({...JSON.parse(localStorage.getItem('auth-info'))})
    }, [info]);

    return (
        <>
            <Navbar>
                <Routes>
                    <Route path={'/'} exact element={<HomePage/>}/>
                    <Route path={'/login'} element={<LoginPage/>}/>
                    <Route path={'/about'} element={<AboutPage/>}/>

                    {authInfo?.role === 'admin' ?
                        <>
                            <Route path={'/doctor'} element={<DoctorManagePage/>}/>
                            <Route path={'/doctor/:id'} exact element={<DoctorEditPage/>}/>
                            <Route path={'/medicine'} element={<MedicineManagePage/>}/>
                            <Route path={'/medicine/:id'} exact element={<MedicineEditPage/>}/>
                            <Route path={'/order'} element={<OrderManagePage/>}/>
                            <Route path={'/order/:id'} exact element={<OrderEditPage/>}/>
                            <Route path={'/student'} element={<StudentManagePage/>}/>
                            <Route path={'/student/:id'} exact element={<StudentEditPage/>}/>
                        </> : <></>}

                    {authInfo?.doctor ? <><Route path={'/doctor/manage/order'} element={<DoctorOrderManagePage/>}/>
                        <Route path={'/doctor/manage/medicine/:id'} exact element={<DoctorMedicineManagePage/>}/>
                        <Route path={'/doctor/manage/medicine/add/:id'} exact element={<DoctorMedicineAddPage/>}/>
                    </> : <></>}

                    {authInfo?.student ? <><Route path={'/student/show/doctor'} element={<DoctorShowPage/>}/>
                        <Route path={'/student/take/medicine'} element={<TakeMedicinePage/>}/>
                        <Route path={'/student/take/medicine/detail/:id'} exact
                               element={<MedicineHistoryDetailPage/>}/>
                        <Route path={'/student/take/medicine/pay/:id'} exact
                               element={<MedicineHistoryPayPage/>}/>
                    </> : <></>}

                    <Route path="*" exact element={<NotFoundPage/>}/>
                </Routes>
            </Navbar>
            <Footer/>
        </>
    )
}

export default App
